package de.gwtprime.client.widgets.javascript;

import java.util.ArrayList;
import java.util.List;

import com.google.gwt.dom.client.Document;
import com.google.gwt.dom.client.Element;
import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.Event;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.FlowPanel;
import com.google.gwt.user.client.ui.SimplePanel;
import com.google.gwt.user.client.ui.Widget;

public class CustomTabsComposite extends Composite{
	
	FlowPanel panel = new FlowPanel();
	SimplePanel containerPanel;
	
	Element tabHeaderContainer = DOM.createElement("div");
	
	FlowPanel tabContentPanel = new FlowPanel();
	
	String domId = Document.get().createUniqueId();
	
	List<Widget> tabs = new ArrayList<Widget>();
	
	/**
	 * Currently selected tab
	 */
	Integer selectedTab = 0;
	
	public CustomTabsComposite(){
		
		// TODO problems with touch devices?
		// Move tab event handling to tab header only
		sinkEvents(Event.TOUCHEVENTS); 
		
		initWidget(panel);
		
		panel.getElement().setId(domId);
		
		
		panel.setStyleName("le-tabs example2 oldlook");
		
		containerPanel = new SimplePanel();
		containerPanel.setStyleName("le-tabs_content_container");
		
		
		
		
		tabContentPanel.setStyleName("le-tabs_content_inner");
		
		containerPanel.add(tabContentPanel);
		
		
	
		
		
		tabHeaderContainer.setAttribute("class", "le-tabs_tab_container aaa");
		
		panel.getElement().appendChild(tabHeaderContainer);
		panel.add(containerPanel);
	
	}
	
	@Override
	public void onLoad(){
		
		runScript(domId);
		
	}

	int i=0;
	private void createLi(Element ul, String name) {
		Element a = DOM.createElement("a");
		a.setAttribute("class", String.valueOf(i));
		a.setInnerHTML(name);
		ul.appendChild(a);
		i++;
	}
	
	public static native void runScript(String domId) /*-{


		$wnd.$("#"+domId).LeTabs({
			autoOrder : true,
			//initialTab : 0,
			//tabSelector : "a.enabled"
			
			animSpeed : 200,
		})

	}-*/;
	
	public void applyCorrectHeight(){
		applyCorrectHeight(domId, selectedTab);
	}
	
	private native void applyCorrectHeight(String domId, int selectedTab) /*-{
		
		// e.g.: jQuery("#gwt-uid-31 .le-tabs_content_container").css("height", jQuery(("#gwt-uid-31 .le-tabs_content_inner")).children().eq(0).height());
		$wnd.jQuery("#"+domId+" .le-tabs_content_container").css("height", $wnd.jQuery(("#"+domId+" .le-tabs_content_inner")).children().eq(selectedTab).height());
		
	}-*/;
	
	
	
	List<SimplePanel> children = new ArrayList<SimplePanel>();
	
	public void add(Widget widget, String tabName){
		add(widget, tabName, true);
	}
	public void add(Widget widget, String tabName,  boolean lazy){
		createLi(tabHeaderContainer, tabName);
		
		SimplePanel childPanel = new SimplePanel(widget);
		children.add(childPanel);
//		childPanel.setVisible(false);
		childPanel.setStyleName("grid_16 le-tabs_content");
//		childPanel.add(widget);
		tabContentPanel.add(childPanel);
		
	}
	
	
	
	/**
	 * Is called on tab change
	 */
	@Override
	public void onBrowserEvent(Event event) {
		// TODO Auto-generated method stub
		//super.onBrowserEvent(event);
		Element el = DOM.eventGetTarget(event);
		selectedTab = Integer.parseInt(el.getClassName());


	}



}
